<template>
  <el-footer>
    <div class="footer">
      <div class="nav">
        <div class="item_footer">
          <h3>关于我们</h3>
          <ul>
            <li class="clickLi" @click="toPath(pathArr[0])">基本介绍</li>
            <li class="clickLi" @click="toPath(pathArr[1])">发展历史</li>
            <li class="clickLi" @click="toPath(pathArr[2])">管理团队</li>
            <li class="clickLi" @click="toPath(pathArr[8])">内容团队</li>
            <li class="clickLi" @click="toPath(pathArr[3])">业务介绍</li>
          </ul>
        </div>
        <div class="item_footer oneTitle">
          <h3 @click="toPath(pathArr[4])">社会责任</h3>
        </div>
        <div class="item_footer oneTitle">
          <h3 @click="toPath(pathArr[5])">案例展示</h3>
        </div>
        <div class="item_footer oneTitle">
          <h3 @click="toPath(pathArr[6])">新闻中心</h3>
        </div>
        <div class="item_footer oneTitle">
          <h3 @click="toPath(pathArr[7])">联系我们</h3>
        </div>
      </div>
    </div>
    <div class="numberBottom">
      <div>Copyright © 2020 旭航网络科技有限公司 – </div>
      <a href="https://beian.miit.gov.cn/" target="_blank">浙ICP备14034154号</a>
    </div>
  </el-footer>
</template>

<script>
    export default {
      name: "FootView",
      data(){
        return{
          pathArr:['/AboutUs/introduce','/AboutUs/history','/AboutUs/team','/AboutUs/business',
            '/Responsibility','/Case','/News','/ContactUs','/AboutUs/personal'],
        }
      },
      methods:{
        // 跳转基本介绍
        toPath(path){
          // console.log(this.$route.path,path)
          this.$store.dispatch('hideNavHome')
          this.$store.dispatch('changeActiveIndexY','2')
          if(this.$route.path === path){
            document.body.scrollTop = 0
            document.documentElement.scrollTop = 0
            window.pageYOffset = 0
          }else{
            this.$router.push({
              path: path
            })
          }
        }
      }
    }
</script>

<style scoped lang="scss">
  // 底部
  .el-footer{
    width: 100%;
    height: auto !important;
    background-color: #f4f4f4;
    padding: 0;
    .footer{
      width: 100rem;
      margin: 0 auto;
      /*display: flex;*/
      /*flex-direction: column;*/
      .nav{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .item_footer{
          h3{
            font-size: 1.35rem;
            color: #666;
            font-weight: 700;
            margin-bottom: 1rem;
            margin-top: 0;
            display: inline-block;
          }
          width: 16.5rem;
          padding: 5.83rem 0 6.33rem;
          text-align: left;
          ul{
            display: flex;
            flex-direction: column;
            list-style: none;
            padding: 0;
            margin: 0;
            li{
              line-height: 2.14;
              font-size: 1.166rem;
              color: #666;
            }
            li:hover{
              color: #333333;
            }
            .clickLi{
              cursor: pointer;
            }
          }
        }
        .oneTitle{
          h3{
            cursor: pointer;
          }
        }
      }
    }
    .numberBottom{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 5rem;
      border-top: .1rem solid #e6e6e6;
      background-color: #00172f;
      div{
        font-size: 1.5rem;
        color: #cccccc;
      }
    }
  }
</style>
